<template>
  <div class="get_drug_wrapper">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="药品名"
        prop="drug.drugname">
      </el-table-column>
      <el-table-column
        label="单价"
        prop="drug.price">
        <template slot-scope="scope">
          ￥ {{scope.row.drug.price}}
        </template>
      </el-table-column>
      <el-table-column
        label="总数"
        prop="count">
      </el-table-column>
      <el-table-column
        label="总价格"
        prop="totalPrice">
        <template slot-scope="scope">
          ￥ {{scope.row.totalPrice}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="totalPrice">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isPay == 1"
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)">已支付</el-button>
          <el-button v-if="scope.row.isPay == 0"
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)">未支付</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <div style="display: flex;">
            <div style="margin: auto auto;"><el-input 
              v-model="search"
              size="mini"
              placeholder="输入挂号单号"/></div>
            <el-button @click="searchDrugs" icon="el-icon-search" style="margin-left: 10px" circle></el-button>
          </div>

        </template>
        <template slot-scope="scope">

          <el-button
            v-if="scope.row.isPay == 1"
            size="mini"
            type="primary"
            @click="sendDrug(scope.row.id)">发药</el-button>
          <el-button
            v-if="scope.row.isPay == 1 && scope.row.isSend == 1"
            size="mini"
            type="success"
            @click="handleDelete(scope.$index, scope.row)">已发药</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>  
import {myGet} from '../utils/api'
export default {
    data() {
      return {
        tableData: [],
        search: '', 
        cur_reg_no: ''
      }
    },
    mounted(){
    },
    methods: {
      sendDrug(id){
        myGet('/reg/drug/send/'+id, null).then(res => {
          console.debug(res.data)
          this.$message({showClose: true, message: '发药成功', type: 'success'})
          this.getDrugs()
        }).catch(err => {
          console.debug(err)
        })
      },
      searchDrugs(){
        this.cur_reg_no = this.search
        this.getDrugs()
      },
      getDrugs(){
        console.debug('getDrugs')
        myGet('/reg/drug/list_by_reg_no?regNo='+this.cur_reg_no, null).then(res => {
          var myres = res.data.res
          console.debug(myres)
          this.tableData = myres
        }).catch(err => {
          console.debug(err)
        })
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

<style>

</style>

<style scoped>

</style>